import 'dart:math' as math;

import 'package:cached_network_image/cached_network_image.dart';
import 'package:earclean/app/config/colors.dart';
import 'package:earclean/app/modules/widget/load_network_image_widget.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/src/size_extension.dart';

import 'msg_box.dart';

class ReceiveMsgBox extends StatefulWidget {
  final String message, avatar, time;

  ReceiveMsgBox(
      {required this.message, required this.avatar, required this.time});

  @override
  State<ReceiveMsgBox> createState() => _ReceiveMsgBoxState();
}

class _ReceiveMsgBoxState extends State<ReceiveMsgBox> {
  @override
  Widget build(BuildContext context) {
    final messageTextGroup = Flexible(
      child: Row(
        mainAxisAlignment: MainAxisAlignment.start,
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          ClipOval(
            child: Image.asset(
              widget.avatar,
              fit: BoxFit.fill,
              width: 46.r,
              height: 46.r,
            ),
            // child:   LoadNetworkImageWidget(
            //   width: 46.r,
            //   height: 46.r,
            //   fit: BoxFit.fill,
            //   imageUrl: widget.avatar,
            // ),
          ),
          SizedBox(width: 10),
          Flexible(
            child: Container(
              margin: EdgeInsets.only(top: 10),
              padding: EdgeInsets.all(14),
              decoration: BoxDecoration(
                color: ColorConfig.white,
                borderRadius: BorderRadius.only(
                  topRight: Radius.circular(10),
                  bottomLeft: Radius.circular(10),
                  bottomRight: Radius.circular(10),
                ),
              ),
              child: Text(
                widget.message,
                style: TextStyle(color: Colors.black, fontSize: 14),
              ),
            ),
          ),
        ],
      ),
    );

    return setUpUi(messageTextGroup);
  }

  Widget setUpUi(Flexible messageTextGroup) {
    return Container(
      width: 1.sw,
      child: Column(
        children: [
          Container(
            padding: EdgeInsets.only(top: 15, bottom: 5),
            child: Text(
              widget.time,
              style: TextStyle(color: Colors.grey.shade300, fontSize: 12),
            ),
          ),
          Padding(
            padding: EdgeInsets.only(
              right: 50.0,
              left: 10,
            ),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.end,
              children: <Widget>[
                SizedBox(height: 30),
                messageTextGroup,
              ],
            ),
          ),
        ],
      ),
    );
  }
}
